<template>
	<div class="addrecord">
		<el-form :model="addruleData" style="margin-left:20px;">
	        <el-form-item label="规则名称">
	          <el-input v-model="addruleData.ruleName"></el-input>
	        </el-form-item>
	        <el-form-item label="规则说明">
	          <el-input v-model="addruleData.describes"></el-input>
	        </el-form-item>
	        <el-form-item label="规则类型">
			  <el-radio v-model="addruleData.type" label="0" @change="currency = true">通用</el-radio>
  			  <el-radio v-model="addruleData.type" label="1" @change="currency = false">非通用</el-radio>
			</el-form-item>
	        <el-form-item label="适用停车场">
	          <span v-if="currency">全部</span>
	          <div v-if="!currency">
	             <span style="margin-right: 18px;">已选择 {{addruleData.num}} 家</span><el-button type="info" size="mini" @click="parkVisible=true">请选择</el-button>
	          </div>
	        </el-form-item>
	        <el-form-item label="月付租金">
	          <el-input v-model="addruleData.monthAmount"></el-input>
	        </el-form-item>
	        <el-form-item label="季付租金">
	          <el-input v-model="addruleData.quarterAmount"></el-input>
	        </el-form-item>
	        <el-form-item label="年付租金">
	          <el-input v-model="addruleData.yearAmount"></el-input>
	        </el-form-item>
	        <el-form-item>
	          <p style="color:#aaa;text-align: center;margin: 0;">注：到期自动转临时车收费标准</p>
	        </el-form-item>
	        <el-form-item style="margin-left: -20px;">
	          <p style="text-align: center;margin: 0;"><el-button type="warning" @click="confirmAdd">确认</el-button></p>
	        </el-form-item>
	    </el-form>

	    <!-- 选择车场弹框 -->
	    <el-dialog title="选择停车场" :visible.sync="parkVisible" width="500px" :before-close="handleClose" :modal="false">
		    <el-form :model="addruleData" style="margin-left:50px;">
		      <el-form-item label="地区">
		        <v-distpicker @selected="sel"></v-distpicker>
		      </el-form-item>
		      <el-form-item label="停车场名称">
		        <el-select v-model="addruleData.pId" filterable placeholder="请选择" @change="selectionParkName">
		            <el-option v-for="item in addruleData.options" :key="item.id" :label="item.parkName" :value="item.parkId">
		            </el-option>
		        </el-select>
		        <span style="margin-left: 10px;">支持多选</span>
		      </el-form-item>
		        <div class="pname" v-for="(name,index) in addruleData.pName">
		          <span class="colse" @click="cancel(index)">X</span>
		          <span >{{name}}</span>
		        </div>
		      <el-form-item style="margin-left:70px;">
		        <el-button type="warning" @click="confirmPark" style="margin-top: 20px;">确认</el-button>
		      </el-form-item>
		    </el-form>
	    </el-dialog>

	</div>
</template>
<script>
	import VDistpicker from 'v-distpicker'
	import axios from 'axios'
	import qs from 'qs'

	export default {
		name:'addrecord',
		components: { VDistpicker, },
		data() {
			return {
				parkVisible: false,
				currency:true,
				addruleData: {
					type:'0',
			        pId:'',
			        options:[],
			        pName:[],
			        parkIds:[],
			        num:0,
				},
     			parkNameSeachData:{},

			}
		},
		methods: {
		    handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	        },
	        sel: function(data) {
	            this.parkNameSeachData.province = data.province.value;
	            this.parkNameSeachData.city = data.city.value;
	            this.parkNameSeachData.area = data.area.value;
	            this.getparkData();
    		},
    		// 获取停车场数据在选择停车场中下拉框显示
		    getparkData(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      this.parkNameSeachData.userId = userId;
		      this.parkNameSeachData.token = token;
		      axios({
		        method:'post',
		        url:'/api/bParkManage/getParkByAddress',
		        data:qs.stringify(this.parkNameSeachData)
		      }).then((res) => {
		        this.addruleData.options = res.data.data;
		      })
		    },
		    selectionParkName(){
		      this.addruleData.parkIds.push(this.addruleData.pId)
		      this.getParkNameById();     
		    }, 
		    //根据车场ID查询车场名称
		    getParkNameById(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      axios({
		        method:'post',
		        url:'/api/bParkManage/selectBParkManageById',
		        data:qs.stringify({userId:userId, token:token, parkId:this.addruleData.pId})
		      }).then((res) => {
		        this.addruleData.pName.push(res.data.data.parkName)
		      })
		    },
		    //取消已选中的停车场
		    cancel(index){
		      this.addruleData.pName.splice(index,1);
		      this.addruleData.parkIds.splice(index,1);
		    },  
		    confirmPark(){
		      this.addruleData.num = this.addruleData.pName.length;
		      this.parkVisible = false;
		    },
		    //确认新增月租卡
		    confirmAdd(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      var userName = sessionStorage.getItem("userName");
		      axios({
		        method:'post',
		        url:'/api/bElecard/addEleCardRule?token='+token+'&userId='+userId+'&uName='+userName,
		        data:this.addruleData
		      }).then((res) => {
		        this.$message(res.data.data);
		        this.$emit('closeDialog', false)
		        this.$emit('refresh');
		      })
		    },




		}
	}
</script>
<style scoped>
	.el-input{
	  width: 300px;
	}
	.pname{
	  border: 1px solid #ccc;
	  padding: 6px 10px;
	  padding-right: 14px;
	  border-radius: 5px;
	  margin:4px;
	  display: inline-block;
	  position: relative;
	}
	.colse{
	  position: absolute;
	  top: 1px;
	  right: 2px;
	  font-size: 12px;
	}
	.colse:hover{
	  cursor: pointer;
	}



</style>